<template>
    <div>
        <van-nav-bar
                title="人员列表"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="search">
            <van-search placeholder="请输入投保人姓名" v-model="searchVal"/>
            <div class="search-btn" @click="onSearch">搜索</div>
        </div>
        <div class="kfOrderUserList">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="realname" label="姓名" width="70" fixed></el-table-column>
                <el-table-column prop="certificate_code" label="身份证号" width="170"></el-table-column>
                <el-table-column prop="sex_text" label="性别" width="50"></el-table-column>
                <el-table-column prop="age_str" label="年龄" width="50"></el-table-column>
                <el-table-column prop="certificate_type" label="工种" width="120"></el-table-column>
                <el-table-column prop="goods_name" label="产品" width="120"></el-table-column>
                <el-table-column prop="birthday" label="联系电话" width="120"></el-table-column>
                <el-table-column prop="unit_price" label="价格" width="120"></el-table-column>
                <el-table-column prop="is_verify_text" label="状态" width="120"></el-table-column>
                <el-table-column prop="update_time" label="最新更新时间" width="120"></el-table-column>
            </el-table>
            <van-pagination class="pagination" v-model="page" :page-count="pageCount" @change="pageChange"/>
        </div>
    </div>
</template>

<script>
    // confirmDialog
    export default {
        name: "kfOrderUserList",
        components: {},
        data() {
            return {
                searchVal: '',

                timeField1: false,
                timeVal1: new Date(),
                timePopupShow1: false,

                timeField2: false,
                timeVal2: new Date(),
                timePopupShow2: false,

                minDate: new Date(),
                maxDate: new Date(),

                tableData: [],
                page: 1,
                limit: 10,
                pageCount: 1,

                tableSelectValArr: [],
            }
        },
        methods: {
            timeConfirm1() {
                this.timeField1 = true;
                this.timePopupShow1 = false;
                if (this.timeField1 && this.timeField2) {
                    this.getList();
                }

            },
            timeConfirm2() {
                this.timeField2 = true;
                this.timePopupShow2 = false;
                if (this.timeField1 && this.timeField2) {
                    this.getList();
                }
            },
            onSearch() {
                this.page = 1;
                this.getList();
            },
            pageChange() {
                this.getList();
            },
            getList() {
                let params = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    order_id: this.$route.query.id,
                    over_time_range: '',
                    page: this.page,
                    limit: this.limit,
                    li_realname: this.searchVal,
                };
                if (this.timeField1 && this.timeField2) {
                    let timeVal1 = this.timeVal1
                    let timeVal2 = this.timeVal2
                    params.over_time_range = `${this.$formatDateTime(this.timeVal1, 'yyyy-MM-dd')}~${this.$formatDateTime(this.timeVal2, 'yyyy-MM-dd')}`
                }
                this.$post("/api/order_detail/detail", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.pageCount = res.data.totalPage // 发票类型
                            this.tableData = res.data.dataList // 发票类型
                            this.$Toast.clear();
                        }
                    })
                    .catch(err => {
                    });
            },
            tableSelectChange(val) {
                this.tableSelectValArr = val;
            },
            delTable() {

                if (this.tableSelectValArr.length == 0) {
                    this.$Toast('请选择商品')
                    return;
                }
                let Arr = []
                this.tableSelectValArr.map((item, index) => {
                    Arr.push(item.id)
                })
                this.$Dialog.confirm({
                    title: '温馨提示',
                    message: '确认删除这几个产品么',
                    closeOnPopstate: true,
                })
                    .then(() => {
                        let params = {
                            wx_member_id: localStorage.getItem('wx_member_id'),
                            token: localStorage.getItem('token'),
                            id: Arr,

                        };
                        this.$post("/api/member_goods/del", params)
                            .then(res => {
                                if (res.code == 1) {
                                    this.getList();
                                    this.$Toast(res.msg);
                                }
                            })
                            .catch(err => {
                            });
                    })
                    .catch(() => {
                    });
            },
        },
        created() {
            this.$Toast.loading({
                duration: 0, // 持续展示 toast
                message: '加载中...',
                forbidClick: true
            });

            this.getList();
        },

    }
</script>

<style scoped lang="less">
    .kfOrderUserList {
        padding: 16px;
    }

    .pagination {
        margin-top: 11px;
    }

    .date-box {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 11px;

        > div:nth-of-type(1) {
            width: 70px;
        }
    }

    .line {
        display: flex;
        align-items: center;

        .border-line {
            border: 1px solid #dcdcdc;
            padding: 0 2px;
            margin: 0 3px;
            border-radius: 3px;
        }

        .time-text {
            flex-wrap: nowrap;
            width: 50px;
            font-size: 15px;
            color: #333333;
        }

        > .money-box {
            position: relative;

            > div {
                flex: 1;
                margin: 3px 6px;
                border: 1px solid #dcdcdc;
                color: #333;
                border-radius: 5px;
            }

            > .money-box {
                position: relative;

                span {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                input {
                    border: none;
                    padding-left: 6px;
                    height: 25px;
                    width: 112px;
                    padding-right: 1px;
                    font-size: 11px;
                    text-align: right;
                }
            }
        }
    }

    .table-box {
        overflow-x: scroll;
    }

    .search {
        display: flex;
        align-items: center;

        > div:nth-of-type(1) {
            flex: 1;
        }

        .search-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fff;
            height: 33px;
            width: 80px;
            margin: 5px;
            background-image: linear-gradient(90deg, #5b8ed1 1%, #366cb3 100%);
            border-radius: 5px;
        }
    }

</style>